import 'package:pacsun/theme/app_colors.dart';
import 'package:pacsun/view/create/become/component/LikeContainer.dart';
import 'package:pacsun/view/create/become/component/MomentDetil.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';

const List<Map<String, dynamic>> inspirations = [
  {
    'url': 'assets/imgs/img_inspriation1.png',
    'likes': '151.2K',
    'text': 'Taking on beach days in our hawaii erica bikini',
    'isLiked': false,
    'proFile': 'assets/imgs/img_creator1.png',
    'comment': [
      {
        'id': 0,
        'content': 'Love this look! So chic and effortless. 😍',
        'nickName': 'lris',
        'like': '30',
        'isLiked': true,
        'proFile': 'assets/imgs/img_creator1.png',
      },
      {
        'id': 0,
        'content': 'Love this look! So chic and effortless. 😍',
        'nickName': 'alice',
        'like': '36',
        'isLiked': true,
        'proFile': 'assets/imgs/img_creator4.png',
      }
    ]
  },
  {
    'url': 'assets/imgs/img_inspriation2.png',
    'likes': '230.6K',
    'text': 'Cleaning Time is a Fashion show',
    'isLiked': true,
    'proFile': 'assets/imgs/img_creator2.png',
    'comment': [
      {
        'id': 0,
        'content': 'Love this look! So chic and effortless. 😍',
        'isLiked': false,
        'nickName': 'lris',
        'like': '30',
        'proFile': 'assets/imgs/img_creator1.png',
      },
      // {
      //   'id': 0,
      //   'content':
      //       'Obsessed with this outfit! Perfect mix of trendy and timeless. 👌',
      //   'isLiked': false,
      //   'nickName': 'alice',
      //   'like': '36'
      // }
    ]
  },
  {
    'url': 'assets/imgs/img_inspriation3.png',
    'likes': '302.7K',
    'text': 'Taking on beach days in our hawaii erica bikini',
    'isLiked': true,
    'proFile': 'assets/imgs/img_creator3.png',
    'comment': [
      {
        'id': 0,
        'content':
            'Casual but so stylish! How do you make basics look this good? 😮',
        'isLiked': false,
        'nickName': 'lris',
        'like': '1.2K',
        'proFile': 'assets/imgs/img_creator1.png',
      },
      {
        'id': 0,
        'content': 'This is such a vibe! Where can I get that top? 👀',
        'isLiked': true,
        'nickName': 'alice',
        'proFile': 'assets/imgs/img_creator3.png',
        'like': '2.3W'
      }
    ]
  },
  {
    'url': 'assets/imgs/img_inspriation4.png',
    'likes': '2.2K',
    'text': 'Cleaning Time is a Fashion show',
    'isLiked': false,
    'proFile': 'assets/imgs/img_creator4.png',
    'comment': [
      {
        'id': 0,
        'content': 'This is giving major fashion inspo! ✨',
        'isLiked': true,
        'nickName': 'lris',
        'like': '1.1k',
        'proFile': 'assets/imgs/img_creator1.png',
      },
      {
        'id': 0,
        'content': 'Styling on point! You always nail it. 💯',
        'isLiked': false,
        'nickName': 'alice',
        'like': '182',
        'proFile': 'assets/imgs/img_creator3.png',
      }
    ]
  },
];

class Moments extends StatelessWidget {
  const Moments({super.key});

  @override
  Widget build(BuildContext context) {
    final bottomPadding = MediaQuery.of(context).padding.bottom;

    return Container(
      width: double.infinity,
      color: Colors.black,
      padding: EdgeInsets.only(top: 33, right: 16, left: 16, bottom: 17).r,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            "Community Moments",
            style: customTextStyle(fontSize: 24, fontWeight: 600),
          ),
          SizedBox(
            height: 30.h,
          ),
          Wrap(
            spacing: 15.w, // 横向间距
            runSpacing: 8.h, // 纵向间距
            children: inspirations.map((inspiration) {
              return GestureDetector(
                onTap: () {
                  showModalBottomSheet(
                    context: context,
                    isScrollControlled: true,
                    backgroundColor: Colors.transparent,
                    builder: ((context) {
                      return MonentDetail(data: inspiration);
                    }),
                  );
                },
                child: SizedBox(
                  width: 164.w,
                  height: 245.h,
                  child: InspirationCardItem(
                    imageUrl: inspiration['url'],
                    text: inspiration['text'],
                    likes: inspiration['likes'],
                    isLiked: inspiration['isLiked'],
                    onLikePressed: () {},
                  ),
                ),
              );
            }).toList(),
          ),
          SizedBox(height: bottomPadding + 60.h)
        ],
      ),
    );
  }
}

class InspirationCardItem extends StatelessWidget {
  final String imageUrl;
  final String text;
  final String likes;
  final bool isLiked;
  final VoidCallback? onLikePressed;

  const InspirationCardItem({
    super.key,
    required this.imageUrl,
    required this.text,
    this.likes = '0',
    this.isLiked = false,
    this.onLikePressed,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 164.w,
      height: 245.h,
      decoration: BoxDecoration(
        color: const Color.fromRGBO(34, 34, 34, 1),
        borderRadius: BorderRadius.circular(8.r),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Stack(
            children: [
              Container(
                width: 164.w,
                height: 178.h,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(8.r),
                    topRight: Radius.circular(8.r),
                  ),
                  image: DecorationImage(
                      image: AssetImage(imageUrl), fit: BoxFit.cover),
                ),
              ),
              Positioned(
                left: 8.w,
                bottom: 8.h,
                child: GestureDetector(
                  onTap: () {},
                  child: LikeContainer(
                    isLiked: isLiked,
                    likes: likes.toString(),
                  ),
                ),
              ),
            ],
          ),
          Container(
            width: 167.w,
            height: 67.h,
            alignment: Alignment.center,
            padding: EdgeInsets.all(10).r,
            child: Text(
              text,
              style: customTextStyle(
                fontSize: 14,
                height: 1.6,
                overflow: TextOverflow.ellipsis,
              ),
              maxLines: 2,
            ),
          )
        ],
      ),
    );
  }
}

// class MomentItme extends StatelessWidget {
//   final String icon;
//   final String firstText;
//   final String lastText;
//   final String iconType;
//   const MomentItme({
//     super.key,
//     required this.icon,
//     required this.firstText,
//     required this.lastText,
//     this.iconType = 'icon',
//   });

//   @override
//   Widget build(BuildContext context) {
//     return Container(
//       width: 105.w,
//       margin: EdgeInsets.only(top: 23).r,
//       child: Column(
//         children: [
//           Container(
//             width: 48.w,
//             height: 45.h,
//             margin: EdgeInsets.only(bottom: 4).r,
//             alignment: Alignment.center,
//             child: iconType == 'text'
//                 ? Text(
//                     icon,
//                     style: customTextStyle(
//                       fontSize: 28,
//                       fontWeight: 900,
//                       color: FamilyTextColor.yellow,
//                     ),
//                   )
//                 : SvgPicture.asset(
//                     icon,
//                     width: 30.w,
//                     height: 30.h,
//                   ),
//           ),
//           Text(
//             firstText,
//             style: customTextStyle(fontSize: 14, height: 22 / 14),
//             textAlign: TextAlign.center,
//           ),
//           Text(
//             lastText,
//             style: customTextStyle(fontSize: 14, height: 22 / 14),
//             textAlign: TextAlign.center,
//           )
//         ],
//       ),
//     );
//   }
// }
